import React, { Component } from 'react'
import classNames from 'classnames'
export default class Tab extends Component {
  // !#2 子组件调用父组件传递过来的方法的同时并传递数据
  handleClick(type, num, e) {
    // 对应不上的那个形参就是事件对象
    console.log(num, e)
    this.props.changeActive(type)
  }
  render() {
    const { tabs, active } = this.props
    return (
      <div className='tabs-order'>
        <ul className='sort-container'>
          {/* {tabs.map((item) => (
            <li key={item.id} className={item.type === active ? 'on' : ''}>
              按{item.name}排序
            </li>
          ))} */}
          {tabs.map((item) => (
            <li
              key={item.id}
              className={classNames({
                // 当右边的条件是 true 的时候就应用左边的 class
                on: item.type === active,
              })}
              onClick={this.handleClick.bind(this, item.type, 8)}
            >
              按{item.name}排序
            </li>
          ))}
        </ul>
      </div>
    )
  }
}
